<script setup lang="ts">
import * as echarts from "echarts";
import { onMounted, ref } from "vue";

let charts = ref();

onMounted(() => {
  initCharts();
});

const trafficWay = [
  {
    name: "小周在线",
    value: 124,
  },
  {
    name: "美团",
    value: 314,
  },
  {
    name: "飞猪",
    value: 513,
  },
  {
    name: "同城",
    value: 245,
  },
];
let sum = trafficWay.reduce((cur, pre) => {
  return cur + pre.value;
}, 0);
let data = [];
let legendData = [];
var color = [
  "#00ffff",
  "#409B5C",
  "#006ced",
  "#ffe000",
  "#ffa800",
  "#ff5b00",
  "#ff3000",
];
for (var i = 0; i < trafficWay.length; i++) {
  let name = trafficWay[i].name + "  " + trafficWay[i].value;
  legendData.push(name);
  data.push(
    {
      value: trafficWay[i].value,
      name: name,
      itemStyle: {
        borderWidth: 0,
        borderRadius: 10,
        shadowBlur: 10,
        borderColor: color[i],
        shadowColor: color[i],
      },
    },
    {
      value: sum / 100, // 控制每个环形之间的间隙
      name: "",
      itemStyle: {
        label: {
          show: false,
        },
        labelLine: {
          show: false,
        },
        color: "rgba(0, 0, 0, 0)",
        borderColor: "rgba(0, 0, 0, 0)",
        borderWidth: 0,
      },
    },
  );
}
let seriesOption = [
  {
    name: "",
    type: "pie",
    clockwise: false,
    radius: ["50%", "70%"],
    center: ["30%", "50%"],
    emphasis: {
      scale: false,
    },
    label: {
      show: false,
    },
    data: data,
  },
];
let option = {
  title: {
    text: "本月总量",
    subtext: sum,
    textStyle: {
      color: "#19E1E3",
      fontSize: 18,
      padding: [0, 0, 25, 0],
    },
    subtextStyle: {
      fontSize: 28,
      fontWeight: "bolder",
      color: "#19E1E3",
    },
    x: "23%",
    y: "39%",
  },
  color: color,
  tooltip: {
    show: false,
  },
  legend: {
    icon: "rect",
    itemWidth: 16,
    itemHeight: 8,
    itemStyle: {
      borderWidth: 3,
    },
    orient: "vertical",
    data: legendData,
    right: "10%",
    top: "center",
    align: "left",
    textStyle: {
      color: "#fff",
      fontSize: 16,
      padding: [0, 0, 0, 10],
    },
    itemGap: 20, // 图例之间的间隔
  },
  toolbox: {
    show: false,
  },
  series: seriesOption,
};

const initCharts = () => {
  let myChart = echarts.init(charts.value);
  myChart.setOption(option);
};

defineOptions({
  name: "Counter",
});
</script>

<template>
  <div class="box8">
    <div class="title">
      <p>预约渠道</p>
      <img src="../../images/dataScreen-title.png" alt="" />
    </div>
    <div class="charts" ref="charts"></div>
  </div>
</template>

<style scoped lang="scss">
.box8 {
  height: 100%;
  width: 100%;
  margin-top: 10px;
  margin-bottom: 20px;
  background: url("../../images/dataScreen-main-cb.png") no-repeat;
  background-size: 100% 100%;

  .title {
    margin-left: 20px;
    margin-top: 10px;
    p {
      color: white;
      font-size: 16px;
    }
  }

  .charts {
    width: 100%;
    height: 100%;
    margin-top: 10px;
  }
}
</style>
